<template>
  <el-dialog
    v-if="load"
    title="成本详情"
    v-model="visible"
    align-center
    width="1200"
    @close="handleClose"
    draggable
    :z-index="2000"
  >
    <div class="dialog-content1">
      <el-tabs v-model="active" type="card" @tab-change="handleChange">
        <el-tab-pane label="FBA头程" :name="1">
          <template v-if="active == 1">
            <FBARecord :formData="formData"></FBARecord>
          </template>
        </el-tab-pane>
        <el-tab-pane label="海外仓头程" :name="2">
          <template v-if="active == 2">
            <overseasRecord :formData="formData"></overseasRecord>
          </template>
        </el-tab-pane>
        <el-tab-pane label="仓库成本" :name="3">
          <template v-if="active == 3">
            <warehouseRecord :formData="formData"></warehouseRecord>
          </template>
        </el-tab-pane>
      </el-tabs>
    </div>
  </el-dialog>
</template>

<script setup lang="jsx">
import { reactive, toRefs } from "vue";
import FBARecord from "./components/FBARecord.vue";
import overseasRecord from "./components/overseasRecord.vue";
import warehouseRecord from "./components/warehouseRecord.vue";

const active = ref(1);

const data = reactive({
  formData: {},
  visible: false,
  load: false,
  activeName: 1,
});

const { formData, visible, load, activeName } = toRefs(data);

// 打开弹窗
const open = async (data) => {
  if (!load.value) {
    load.value = true;
    await 1;
  }
  formData.value.sku = data.sku;
  formData.value.spu_cn_title = data.spu_cn_title;
  activeName.value = 1;
  visible.value = true;
};

const handleClose = () => {
  activeName.value = null;
  visible.value = false;
};

defineExpose({ open });
</script>
<style lang="scss">
.hidden {
  display: none;
}
.diff-class {
  color: #ff0000 !important;
}

.mytable-scrollbar {
  ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
  }
  ::-webkit-scrollbar-thumb {
    border-radius: 4px;
  }
}
</style>
